<template>
  <div class="mcontainer">
    <van-nav-bar
      class="larr"
      left-arrow
      @click-left="onClickLeft"
      :border="false"
    >
      <div slot="title" class="sl">{{ datas.fromUser.nickname }}</div>
      <van-icon slot="left" class="sr" name="arrow-left" />
    </van-nav-bar>
    <div class="time">{{ datas.time | formateDate('yyyy-MM-dd HH:mm') }}</div>
    <div class="medden">
      <div class="mess" v-for="(item, index) in persondata" :key="index">
        <div class="lefte">
          <van-image
            width="40"
            height="40"
            round
            :src="item.fromUser.avatarUrl"
          />
        </div>
        <div class="righte">
          <div class="text">{{ item.fromUser.signature }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from '../formadata'
import { getpersonnews } from '@/api/mynews'
export default {
  name: 'Message',
  props: {
    isMessage: {
      type: Boolean,
      required: true
    },
    data: {
      type: [Array, Object],
      required: true
    },
    userId: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      persondata: [],
      datas: {}
    }
  },
  created () {
    this.getpersonnews()
  },
  mounted () {},
  methods: {
    async getpersonnews () {
      const cookie = this.$store.state.cookie
      console.log(11)
      const { msgs } = await getpersonnews(this.userId, cookie)
      console.log(11)
      // msgs.forEach(item => {
      //   this.persondata.push({ ...item })
      // })
      this.persondata = msgs
      this.datas = { ...this.persondata[0] }
      console.log(this.datas)
    },
    onClickLeft () {
      this.$emit('is-message', false)
    }
  },
  filters: {
    formateDate (data, fmt) {
      return formatDate(data, fmt)
    }
  }
}
</script>

<style scoped lang="less">
.mcontainer {
  .larr {
    .sr {
      color: black;
    }
    .sl {
      font-weight: 700;
    }
  }
}
.time {
  padding-top: 12px;
  text-align: center;
  color: #ccc;
  font-size: 28px;
}
.medden {
  margin-top: 12px;

  /deep/ .mess {
    width: 200px;
    display: flex;
    padding: 0 50px;
    .lefte {
      flex: 1;
      margin-right: 10px;
    }
    .righte {
      margin-top: 22px;
      .text {
        overflow: hidden;
        width: 480px;
        font-size: 34px;
        padding: 15px;
        border-radius: 15px;
        background: rgb(247, 247, 247);
        word-wrap: break-word;
        // width: 10px;
      }
    }
  }
}
</style>
